//-- copyright
// OpenProject is a project management system.
// Copyright (C) 2012-2017 the OpenProject Foundation (OPF)
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License version 3.
//
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
// Copyright (C) 2006-2017 Jean-Philippe Lang
// Copyright (C) 2010-2013 the ChiliProject Team
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation; either version 2
// of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
//
// See doc/COPYRIGHT.rdoc for more details.
//++


// IMPORTANT!

// This is a "junk-drawer" containing CSS rule sets that could not be easily
// placed elsewhere. Pleade DO NOT add to this file. Instead MOVE, refactor or
// REMOVE with ruthlessness.

$version-summary-width: 380px

#watchers
  ul
    margin: 0
    padding: 0

  a.delete
    opacity: 0.4
    &:hover
      opacity: 1

.highlight
  background-color: #FCFD8D
  &.token-1
    background-color: #faa
  &.token-2
    background-color: #afa
  &.token-3
    background-color: #aaf

.contextual
  float: right
  white-space: nowrap
  line-height: 1.4em
  margin-top: 8px
  padding-left: 10px
  input, select
    font-size: 0.9em

.message .contextual
  margin-top: 0

form
  display: inline

hr
  width: 100%
  height: 1px
  background: #ccc
  border: 0

blockquote
  font-style: italic
  border-left: 3px solid #e0e0e0
  padding-left: 0.6em
  margin-left: 2.4em
  blockquote
    margin-left: 0

li p
  margin-top: 0

p
  &.breadcrumb
    font-size: 0.9em
    margin: 4px 0 4px 0
  &.footnote
    font-size: 0.9em
    margin-top: 0
    margin-bottom: 0

div.issue div.subject
  div div
    padding-left: 16px
  p
    margin: 0
    margin-bottom: 0.1em
    font-size: 90%
    color: #999
  > div > p
    margin-top: 0.5em

.buttons
  margin-top: 1em

div
  &#work_package-changesets
    float: right
    width: 45%
    margin: 1em 0 1em 1em
    background: #fff
    padding-left: 1em
    h3
      margin-top: 0
    div.changeset
      padding: 4px
      border-bottom: 1px solid #ddd
    p
      margin-top: 0
      margin-bottom: 1em

div#activity span.project:after, #search-results span.project:after
  content: " -"

#search-results
  margin-left: 2em

  dd
    margin-bottom: 1em
    padding-left: 30px
    margin-left: 0
    font-size: 0.9em

    span.description
      display: block
      color: #808080
      font-style: italic

div#search-results-counts
  float: right
  ul
    margin-top: 0.5em
  li
    list-style-type: none
    float: left
    margin-left: 1em

.search-pagination
  text-align: center
  a
    padding: 0 5px

#project-search-container .select2-container
  display: block

div
  &#roadmap
    .related-issues
      border: 0
      margin-bottom: 1em
      td.checkbox
        display: none

    .generic-table--no-results-container
      max-width: calc(100% - #{$version-summary-width})

  &#version-summary
    float: right
    width: $version-summary-width
    margin-left: 16px
    margin-bottom: 16px
    background-color: #fff
    .total-hours
      text-align: right

.top-page
  width: 100%
  border-bottom: 1px solid #bbbbbb
  margin: 0 0 10px
  h2
    padding-right: 0 !important
    border: none
    margin: 0
    text-align: left
    display: block
    text-overflow: ellipsis
    white-space: nowrap
    overflow: hidden

    &.message-title
      padding-top: 12px
      padding-bottom: 19px
      white-space: normal
      overflow: visible
      float: left

  &.messages-wrapper
    @include clearfix
    .toolbar-container
      float: right

  ul
    margin: 0
    text-align: right
    white-space: nowrap


#type_project_ids
  ul
    margin: 0
    padding-left: 1em
  li
    list-style-type: none

ul.properties
  padding: 0
  font-size: 0.9em
  color: #333
  li
    list-style-type: none
    span
      font-style: italic

.total-hours
  font-size: 110%
  font-weight: bold
  span.hours-int
    font-size: 120%

.autoscroll
  overflow-x: auto
  padding: 1px
  margin-bottom: 1.2em

#workflow_copy_form select
  width: 200px

textarea#custom_field_possible_values
  width: 99%


div.attachments
  margin-top: 12px
  p
    margin: 4px 0 2px 0
  img
    vertical-align: middle
  span.author
    font-size: 0.9em
    color: #888

p.other-formats
  font-size: 0.9em
  color: #666

.other-formats span + span:before
  content: "| "

/* Project members tab */

div#tab-content-members
  .user.status_registered, label.status_registered
    opacity: 0.8
  .member
    .icon-group:before
      padding-left: 0

input#user_search
  width: 100%

.quick_info
  padding-bottom: 0.5em
  &.attributes .label
    font-weight: bold

.journal-link
  float: right

h2 img
  vertical-align: middle

h1.title
  margin: 12px 24px 9px

form#issue-list
  position: relative

div.issue hr
  margin-top: 10px
  margin-bottom: 10px
  clear: both

#content div.issue h3, div.issue h3
  border: 0
  margin-top: -6px
  margin-bottom: 0

#content blockquote
  padding-left: 22px

#project-links
  right: 30px
  color: #ccc
  font-weight: bold

.nosidebar
  blockquote
    margin: 1em 0
  p
    margin-bottom: 1em

li
  &.root
    margin-bottom: 24px

.profile-wrap
  float: right
  position: relative
  width: 42px
  height: 42px
  top: 7px
  right: 14px

td.issue div.issue-wrap-outer
  position: relative

.menu li
  position: relative
  &:first-child
    border-top: 0
  &:last-child
    border-bottom: 0

.inline
  display: inline

form#issue-list
  display: block

.js-tooltip
  width: 100%

.js-tooltip-inner
  width: 100%
  max-height: none

.js-tooltip .issue-tooltip-description
  max-height: 200px
  overflow: hidden

/* roadmap breathing */

#roadmap h3
  margin: 21px 0 12px

div.issue div#relations
  margin-top: 25px

/* all kinds of wonderful tweaks*/

.question pre
  color: #111

div.issue hr
  width: auto

.question .wiki
  margin: 0

.wiki
  ol, ul
    margin-bottom: 6px

// The min-height takes care that menus within the toolbar can be seen.
// On the full screen view the min-height crashes the complete view
// when anchors in the url were used on small sreens, because there the body is not scrollable.
body:not(.action-show) #content
  min-height: 300px

#content
  h3
    margin: 12px 0 6px
  h2 + h3
    margin-top: 12px

.nosidebar
  ol.ui-sortable li
    list-style: none outside none

tr.time-entry
  white-space: normal

/* scm */

#content table .changeset td.id a:hover
  text-decoration: underline


/* member settings [pc] */

select#member_role_id
  width: 75px

/* fix for thumbnail jankiness */

a.has-thumb
  &.active
    left: auto
    margin-left: -10px
    margin-right: 0
    *left: -10px
    /* IE6 & 7 hacks */
    *margin-left: 0
  img
    z-index: 1001

#more-menu.drop-down ul li a.projects
  border-top: 1px solid #555

.reorder-icons img
  padding-right: 3px
  padding-left: 3px


/* Cut of text with '...' - working on all major browsers and IE6+
 * not working for Firefox < 7 */

.ellipsis,
.form--field.ellipsis .form--label
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  -o-text-overflow: ellipsis
  -ms-text-overflow: ellipsis

label
  margin-bottom: 0rem
  &.label-with-input
    display: block
    white-space: nowrap
    zoom: 1
    margin-left: 0
    float: none

#query_form_content
  padding-top: 10px

#lower-title-bar
  div.contextual
    margin-top: -8px
  margin-top: 30px
  margin-left: 10px

#watchers .contextual
  margin-top: 0

div
  &.issues.box > p, &.mypage-box p
    margin-top: 15px

  &.overview
    padding: 6px
    margin-bottom: 10px
    line-height: 1.5em

td.table-buttons
  vertical-align: middle

select#available_columns
  margin-right: 0

.pages-hierarchy
  padding-left: 10px
  list-style-type: disc
  list-style-position: inside

#menu-sidebar.hidden
  display: none

div#watchers
  margin-top: 25px
  > form > p
    margin-top: 5px

a > img.imgtag-icon
  float: left
  margin-right: 3px

th.checkbox img
  margin-left: 3px
  margin-top: 3px

p.buttons
  margin-left: 10px

strong.related-issues-heading
  display: block
  margin-top: 10px

div.indent
  padding-left: 10px

/* Menu item configuration */

.menu-item-form
  p
    padding-left: 0
  label
    display: inline-block
    margin-bottom: 10px
    margin-left: 0
    width: auto
    font-weight: bold
  select#parent_wiki_menu_item
    margin-left: 7px
    margin-top: -1px
    line-height: normal
  #item-name
    float: left
    padding-left: 3px
    margin-right: 4px
    line-height: 21px
  label#with-select
    margin-left: 0
  select#parent_wiki_menu_item_wiki_page
    margin-bottom: 10px
  p
    &.item-name
      padding-top: 10px
    &.main_item
      padding-bottom: 0
    &.wiki_menu_item_optional_links
      margin-left: 10px
      padding-top: 0

/*Cost-Plugin specific styles */

input::-webkit-input-placeholder, :-moz-placeholder
  color: #000000

#ui-dialog-closer
  cursor: pointer
  position: absolute
  right: 0px
  top: 5px
  z-index: 5000

  &.icon:before
    color: $body-font-color

#modalDiv
  padding: 2em 0 0 1.5em

  &.-full
    padding: 0

h4.comment
  margin-bottom: 8px
  margin-top: 18px
  img
    margin-right: 3px

/*
 * Legacy headings to create headings which are similiar to the toolbar
 * but cannot use the toolbar yet (e.g Legacy forms)
 */
.legacy-heading
  // this will harmonize the headings in the old legacy form
  // to be the same as if using a toolbar component
  // TODO: once WP full screen create hits, remove this
  padding-top: 12px
  border: 0
  @include breakpoint(medium down)
    font-size: $h2-font-size

#members_add_form
  margin-bottom: 1rem
  .-flex
    display: flex
    align-items: flex-end

    // Neccassary to avoid the appearance of a scroll bar
    .select2-search-field
      margin: 0

    .form--field,
    #member-add-submit-button--container
      margin-bottom: 1px
      flex-basis: 50%

    &:not(.-with-button)
      .form--field
        overflow: hidden

  // Override default margin to allow correct vertical alignment
  #add-member--submit-button
    margin-bottom: 0
    margin-left: 1rem
    // Neccessary so that button and select box have the same height
    line-height: 0.6rem

@include breakpoint(680px down)
  #members_add_form .-flex
    align-items: flex-start

    &.-with-button
      flex-direction: column
      // Workaround for safari and IE
      // They are not able to get the correct height with flex-direction: column
      height: 120px

    #add-member--submit-button
      margin-left: 0
    .form--field
      margin-bottom: 1rem

@media screen and (max-width: 87rem) and (min-width: 681px)
  #members_add_form .-flex.-with-button
    .form--field
      max-width: 60%
      select
        max-width: 60%

// Avoid content cut off in IE
#new-member-message + div.grid-block
  min-height: 6rem
  div.grid-block
    overflow: visible
